<template>
  <div class="filter-container">
    <el-row :gutter="10">
      <el-col :span="4">
        <el-input
          v-model="listQuery.search"
          placeholder="模糊搜索"
          size="small"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        ><i slot="prefix" class="el-input__icon el-icon-search" /></el-input>
      </el-col>
      <el-col :span="4">
        <el-input
          v-model="listQuery.management_ip"
          placeholder="精确IP搜索"
          clearable
          size="small"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        > <i slot="prefix" class="el-input__icon el-icon-search" /></el-input>
      </el-col>
      <el-col :span="8">
        <el-button-group>
          <el-button class="filter-item" size="small" type="primary" icon="el-icon-search" @click="handleFilter">
            搜索
          </el-button>
          <el-button
            v-if="checkPermission(['admin','network_create','network_all'])"
            class="filter-item"
            size="small"
            type="primary"
            icon="el-icon-edit"
            @click="handleCreate"
          >新增</el-button>
          <el-button v-if="checkPermission(['admin','network_delete','network_all'])" size="small" class="filter-item" type="danger" icon="el-icon-delete" @click="handleSelectDel">
            批量删除
          </el-button>
        </el-button-group>
      </el-col>
      <el-col :span="4" :offset="4">
        <el-button-group>
          <el-tooltip content="支持先筛选后再导出哦">
            <el-button size="small" :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
              导出
            </el-button>
          </el-tooltip>
          <el-button size="small" :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-upload" @click="handleUpload">
            导入
          </el-button>
        </el-button-group>
      </el-col>
    </el-row>
    <el-row :gutter="12">
      <el-col :span="4">
        <el-select v-model="deviceTypeSelect" class="filter-item" clearable size="small" placeholder="请选择设备类型" @change="handleDeviceTypeFilter">
          <el-option
            v-for="item in deviceTypeDict"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="assetsStatusSelect" class="filter-item" clearable size="small" placeholder="请选择设备状态" @change="handleStatusFilter">
          <el-option
            v-for="item in assetsStatusDict"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button class="filter-item" size="small" type="info" icon="el-icon-refresh" @click="handleRefresh">清空</el-button>
      </el-col>
    </el-row>

  </div>
</template>
<script>
import checkPermission from '@/utils/permission'
import { parseTime } from '@/utils'
// import { getNetwork } from '@/api/network'
export default {
  props: {
    listQuery: {
      type: Object,
      default: () => {
        return {
          search: '',
          page: '',
          limit: ''
        }
      }
    },
    deviceTypeDict: {
      type: Array,
      required: true
    },
    assetsStatusDict: {
      type: Array,
      required: true
    },
    list: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      deviceTypeSelect: '',
      assetsStatusSelect: '',
      downloadLoading: false
    }
  },
  methods: {
    checkPermission,
    handleSelectDel() {
      const selected = this.$parent.multipleSelection
      if (selected == null || selected.length === 0) {
        this.$message('你还没有勾选任何数据')
        return
      }
      const count = selected.length
      this.$confirm('此操作将删除' + count + '条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$parent.handleSelectionDel()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleFilter() {
      this.$emit('filter')
    },
    handleCreate() {
      this.$emit('create')
    },
    handleUpload() {
      this.$router.push({
        path: '/assets/server/upload',
        query: { type: 'network' }
      })
    },
    handleDeviceTypeFilter() {
      this.listQuery.device_type = this.deviceTypeSelect
      this.$emit('filter')
    },
    handleStatusFilter() {
      this.listQuery.status = this.assetsStatusSelect
      this.$emit('filter')
    },
    handleRefresh() {
      this.listQuery.device_type = ''
      this.listQuery.status = ''
      this.deviceTypeSelect = ''
      this.assetsStatusSelect = ''
      this.$emit('filter')
    },
    handleDownload() {
      this.downloadLoading = true
      this.$confirm('你可以设置表格页数(如999/页)以展示页数以导出更多数据,也可以先过滤你需要的数据再导出', '提示', {
        confirmButtonText: '确定导出',
        cancelButtonText: '取消'
      }).then(() => {
        this.$emit('exportLimit')
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['id', '管理IP', 'ip1', 'ip2', '上架日期', '维保日期', '资产SN', '型号', '品牌', '设备类型', '资产状态', 'idc', '机柜', '主机名', '应用', '端口', '管理网段', '固件版本', '认证类型', '上联端口', '上联设备', 'WEB管理', '用户名', '密码', 'tags', '备注']
          const filterVal = ['id', 'management_ip', 'ip1', 'ip2', 'shelves_date', 'maintenance_date', 'sn', 'model', 'brand', 'device_type', 'status', 'idc', 'cabinet', 'hostname', 'app', 'port', 'management_segment', 'os_version', 'auth_type', 'up_link_port', 'up_device', 'web_url', 'username', 'password', 'tags', 'remarks']
          const data = this.formatJson(filterVal, this.list)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: 'NetwrokList'
          })
        })
        this.$message({
          type: 'success',
          message: '导出成功!'
        })
      })
      this.downloadLoading = false
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else if (j === 'idc') {
          if (v[j] !== null) {
            return (v[j].name)
          }
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>

